<template>
  <div class="app-container">
    <el-form>

      <el-form-item label="优惠券名称">
        <el-input v-model="couponInfo.couponName"/>
      </el-form-item>
      <el-form-item label="优惠券类型">
        <el-radio-group v-model="couponInfo.couponType">
          <el-radio :label="1">注册卷</el-radio>
          <el-radio :label="2">推荐购买卷</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="发行数量">
        <el-input v-model="couponInfo.publishCount"/>
      </el-form-item>
      <el-form-item label="领取时间">
        <el-date-picker
          v-model="couponInfo.startTime"
          type="datetime"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd HH:mm:ss" />
        至
        <el-date-picker
          v-model="couponInfo.endTime"
          type="datetime"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item>
      <el-form-item label="过期时间">
        <el-date-picker
          v-model="couponInfo.expireTime"
          type="datetime"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item>
      <el-form-item label="规则描述">
        <el-input v-model="couponInfo.ruleDesc" type="textarea" rows="5"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate">保存</el-button>
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import conponinfoApi from '@/api/order/coupon-info'
import fa from "element-ui/src/locale/lang/fa";

const defaultForm = {
  id: '',
  couponType: '1',
  couponName: '',
  amount: '0',
  conditionAmount: '0',
  startTime: '',
  endTime: '',
  rangeType: '1',
  ruleDesc: '',
  publishCount: '',
  perLimit: '1',
  useCount: '0',
  receiveCount: '',
  expireTime: '',
  publishStatus: ''
}
export default {
  data() {
    return {
      couponInfo: defaultForm,
      saveBtnDisabled: false,
      keyword: '',
      skuInfoList: []
    }
  },
  created() {
    this.initData()
  },
  watch:{
    //监听路由变化
    $router(to,from){
       this.initData()
    }
  },
  methods: {
     initData(){
       if (this.$route.params.id){
         this.fetchDataById(this.$route.params.id)
       }else{
         this.couponInfo = {...defaultForm}
       }
     },
    // 根据id查询记录
    fetchDataById(id) {
      conponinfoApi.getById(id).then(response => {
        this.couponInfo = response.data
      })
    },
    saveOrUpdate() {
       this.saveBtnDisabled = true //防止重复提交
       if (this.couponInfo.id){
         conponinfoApi.updateById(this.couponInfo)
           .then(res => {
             this.$message.success('更新成功！')
             this.$router.push({path:'/marketing/couponInfo/list'})
           })
       }else{
         conponinfoApi.save(this.couponInfo)
           .then(res => {
             this.$message.success('新增成功！')
             this.$router.push({path:'/marketing/couponInfo/list'})
           })
       }
    },
    back() {
      this.$router.push({ path: '/marketing/couponInfo/list' })
    },
  }
}
</script>

<style scoped lang="scss">

</style>
